<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <!--    引入vue 路由-->
    <script src="../vue/vue-router.js"></script>
</head>
<body>

<!--
   路由切常用方式：

-->

<div id="app">
    <!--    路由出口-->
    <h1>路由匹配组件</h1>
    <router-view></router-view>
    <hr>
    <h2>路由切换方式1 a </h2>
    <a href="#/login">登录组件</a>
    <a href="#/register">注册组件</a>
    <hr>
    <h2>路由切换方式2 to=string </h2>
    <router-link to="/login">登录组件</router-link>
    <router-link to="/register">注册组件</router-link>
    <hr>
    <h2>路由切换方式3 :to={path}</h2>
    <router-link :to="{path:'/login'}">登录组件</router-link>
    <router-link :to="{path:'/register'}">注册组件</router-link>

    <hr>
    <h2>路由切换方式4 :to={name}  命名路由  解耦 </h2>
    <router-link :to="{name:'login'}">登录组件</router-link>
    <router-link :to="{name:'register'}">注册组件</router-link>
    <hr>
    <h2>路由切换方式5 js切换路由</h2>
    <button @click="login">登录组件</button>
    <button @click="register">注册组件</button>

</div>

<script>
    // 定义登录组件
    let login = {
        template: `
          <div>
                <h2>登录</h2>
                <form action="#" method="get">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit" value="登录"></p>
                </form>
            </div>
        `
    }
    // 注册组件
    let register = {
        template: `
          <div>
                <h2>注册</h2>
                <form action="#" method="get">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit" value="注册"></p>
                </form>
            </div>
        `
    }

    // 2. 定义路由列表    映射关系
    const routes = [
        {path: '/', redirect:'/login'},
        {path: '/login', component: login, name: "login"},
        {path: '/register', component: register, name: 'register'}
    ]

    // 3. 实例化路由管理对象
    const router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login(){
                 // 切换路由
                console.log(this.$router)
                // this.$router.push('/login')
                this.$router.push({path:'/login'})
            },
            register(){
                // 切换路由
                console.log(this.$router)
                // this.$router.push('/register')
                this.$router.push({name:'register'})
            }
        },
        router   //  建立vm实例和router的关系
    })

</script>


</body>
</html>
